<template>
  <div class="app">
    <UserInfo
     :username="username" 
    ></UserInfo>
    <!-- 什么是prop
    prop定义：组件上注册的一些自定义属性
    prop作用：向子组件传递数据
    特点：
    可以传递任意数量的prop
    可以传递任意类型的prop -->
    <!-- props校验
    思考：组件的prop可以乱传吗？
    作用：为组件的prop指定验证要求，不符合要求，控制台就会有错误提示——>帮助开发者，快速发现错误
    语法：
    1.类型校验
    2.非空校验
    3.默认值
    4.自定义校验
    props: {
      校验的属性名：类型
    }
    
    数据流向
    父组件的 data 中定义了 username: '小帅'。

    父组件通过 :username="username" 将 username 的值（'小帅'）绑定到子组件 UserInfo 的 username 属性。

    子组件通过 props: ['username'] 声明接收该属性。

    子组件模板中通过 {{ username }} 显示传递过来的值。 -->
  </div>
</template>

<script>
import UserInfo from './components/UserInfo.vue'
export default {
  data() {
    return {
      username: '小帅',
      age: 28,
      isSingle: true,
      car: {
        brand: '宝马',
      },
      hobby: ['篮球', '足球', '羽毛球'],
    }
  },
  components: {
    UserInfo,
  },
}
</script>

<style>
</style>